<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Responsive Bootstrap 4 Admin &amp; Dashboard Template">
	<meta name="author" content="Bootlab">

	<title> demo_客户_资产_应收账款</title>

	<link href="css/app.css" rel="stylesheet">




</head>

<body>
	<div class="wrapper">
		<div class="d-flex">
			<nav class="sidebar">
				<div class="sidebar-content ">
					<a class="sidebar-brand" href="index.html">
						<i class="align-middle" data-feather="command"></i>
						<span class="align-middle">供应链金融平台</span>
					</a>

					<ul id='sidebar-menu' class="sidebar-nav">
						<script id="script_menu" type="text/x-handlebars-template">

							{{#each menuitems}}
								<li class="sidebar-header">
									{{title}}
								</li>
								{{#if groups}}
									{{#each groups}}
										<li class="sidebar-item" {{#if ../actived }} active {{/if}}>

											<a href="{{href}}" data-toggle="collapse" class="sidebar-link 	{{#if this.actived}} {{else}} collapsed {{/if}}">
												<i class="align-middle" data-feather={{icon}}></i> <span class="align-middle">{{title}}</span>
											</a>

											{{#if items}}
												<ul id="{{id}}" class="sidebar-dropdown list-unstyled collapse  	{{#if this.actived}} show {{else}} {{/if}}">
													{{#each items}}

														<li class="sidebar-item {{#if actived}} active {{/if}}">
															<a class="sidebar-link " href={{href}}>{{title}}</a>
														</li>
													{{/each}}
												</ul>
											{{/if}}
										</li>
									{{/each}}
								{{/if}}
							{{/each}}
						</script>
					</ul>

					<div class="sidebar-bottom d-none d-lg-block">
						<div class="media">
							<img class="rounded-circle mr-3" src="img/avatar.jpg" alt="Chris Wood" width="40" height="40">
							<div class="media-body">
								<h5 class="mb-1 text-white">Chris Wood</h5>
								<div class="text-light">
									<i class="fas fa-circle text-success"></i> Online
								</div>
							</div>
						</div>
					</div>

				</div>
			</nav>

			<div class="main">
				<nav class="navbar navbar-expand navbar-light bg-white">
					<a class="sidebar-toggle d-flex mr-2">
						<i class="hamburger align-self-center"></i>
					</a>

					<form class="form-inline d-none d-sm-inline-block">
						<input class="form-control form-control-no-border mr-sm-2" type="text" placeholder="Search projects..." aria-label="Search">
					</form>


					<div class="navbar-collapse collapse">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item dropdown">
								<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
									<div class="position-relative">
										<i class="align-middle" data-feather="message-circle"></i>
										<span class="indicator">4</span>
									</div>
								</a>
								<div id="messages" class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
									<script id="script_messages" type="text/x-handlebars-template">
										<div class="dropdown-menu-header">
									<div class="position-relative">
											{{total}}  New Messages
									</div>
								</div>
								<div class="list-group">
									{{#each items}}
									<a href="#" class="list-group-item">
										<div class="row no-gutters align-items-center">
											<div class="col-2">

												<img src="{{avatar}}" class="avatar img-fluid rounded-circle" alt="{{who}}">
											</div>
											<div class="col-10 pl-2">
												<div class="text-dark">{{who}}</div>
												<div class="text-muted small mt-1">{{content}}</div>
												<div class="text-muted small mt-1">{{time}}</div>
											</div>
										</div>
									</a>
								 	{{/each}}
								</div>
								<div class="dropdown-menu-footer">
									<a href="#" class="text-muted">Show all messages</a>
								</div>
								</script>
								</div>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-toggle="dropdown">
									<div class="position-relative">
										<i class="align-middle" data-feather="bell-off"></i>
									</div>
								</a>
								<div id="alerts" class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="alertsDropdown">
									<script id="script_alerts" type="text/x-handlebars-template">
										<div class="dropdown-menu-header">
									{{total}} New Notifications
								</div>
								<div class="list-group">
									{{#each items}}
										<a href="#" class="list-group-item">
										<div class="row no-gutters align-items-center">
											<div class="col-2">
													<i class="text-danger" data-feather="alert-circle"></i>
											</div>
											<div class="col-10">
												<div class="text-dark">{{title}}</div>
												<div class="text-muted small mt-1">{{content}}</div>
												<div class="text-muted small mt-1">{{time}}</div>
											</div>
										</div>
									</a>
									{{/each}}
								</div>
								<div class="dropdown-menu-footer">
									<a href="#" class="text-muted">Show all notifications</a>
								</div>
								</script>
								</div>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
									<span class="d-inline-block d-md-none">
										<i class="align-middle" data-feather="settings"></i>
									</span>
									<span class="d-none d-sm-inline-block">
										<img src="img/avatar.jpg" class="avatar img-fluid rounded-circle mr-1" alt="Chris Wood" /> <span class="text-dark">Chris Wood</span>
									</span>
								</a>
								<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
									<a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="user"></i>
										Profile</a>
									<a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="pie-chart"></i> Analytics</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#">Settings & Privacy</a>
									<a class="dropdown-item" href="#">Help</a>
									<a class="dropdown-item" href="#">Sign out</a>
								</div>
							</li>
						</ul>
					</div>
				</nav>

				<main class="content">
					<div class="container-fluid p-0">
						<div class="row">
							<div class="col-md-12 col-xl-12">
								<div class="card">
									<div class="card-header">
								 
										<h5 class="card-title mb-0">查询</h5>
									</div>
									<div class="card-body">
										<form>
											<div class="form-row">
												<div class="form-group col-md-4">
													<label for="inputFirstName">项目编号</label>
													<input type="text" class="form-control" id="inputFirstName" disabled placeholder="项目1">
												</div>
												<div class="form-group col-md-4">
													<label for="inputLastName">协议编号</label>
													<input type="text" class="form-control" id="inputLastName" disabled placeholder="协议1">
												</div>
												<div class="form-group col-md-4">
													<label for="inputLastName">融资人</label>
													<input type="text" class="form-control" id="inputLastName" placeholder="融资人">
												</div>
											</div>

											<div class="form-row">

												<div class="form-group col-md-4">
													<label for="inputCity">资产编号</label>
													<select id="inputState" class="form-control">
														<option selected>ASSET0001</option>
														<option>...</option>
													</select>
												</div>
												<div class="form-group col-md-4">
													<label class="form-label">日期选择</label>
													<input class="form-control" type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
												</div>
												<div class="form-group col-md-4">
													<label for="inputState">借据状态</label>
													<select id="inputState" class="form-control">
														<option selected>Choose...</option>
														<option>...</option>
													</select>
												</div>

											</div>
											<button type="submit" class="btn btn-primary">查询</button>
										</form>
										<script>
											document.addEventListener("DOMContentLoaded", function(event) {
												// Select2
												$('.select2').each(function() {
													$(this)
														.wrap('<div class="position-relative"></div>')
														.select2({
															placeholder: 'Select value',
															dropdownParent: $(this).parent()
														});
												})
												// Daterangepicker
												$('input[name="daterange"]').daterangepicker({
													opens: 'left'
												});
												$('input[name="datetimes"]').daterangepicker({
													timePicker: true,
													opens: 'left',
													startDate: moment().startOf('hour'),
													endDate: moment().startOf('hour').add(32, 'hour'),
													locale: {
														format: 'M/DD hh:mm A'
													}
												});
												$('input[name="datesingle"]').daterangepicker({
													singleDatePicker: true,
													showDropdowns: true
												});
												var start = moment().subtract(29, 'days');
												var end = moment();

												function cb(start, end) {
													$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
												}
												$('#reportrange').daterangepicker({
													startDate: start,
													endDate: end,
													ranges: {
														'Today': [moment(), moment()],
														'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
														'Last 7 Days': [moment().subtract(6, 'days'), moment()],
														'Last 30 Days': [moment().subtract(29, 'days'), moment()],
														'This Month': [moment().startOf('month'), moment().endOf('month')],
														'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
													}
												}, cb);
												cb(start, end);
											});
										</script>

									</div>
								</div>
								<div class="card">
									<div class="card-header">
										<h5 class="card-title mb-0">借据列表</h5>
									</div>
									<table class="table">
										<thead>
											<tr>
												<th>借据编号</th>
												<th style="width:15%">借据金额</th>
												<th style="width:15%">借据余额</th>
												<th style="width:15%">借据状态</th>
												<th class="d-none d-md-table-cell" style="width:15%">起始日期</th>
												<th class="d-none d-md-table-cell" style="width:15%">到期日期</th>
												<th>详情</th>
											</tr>
										</thead>
										<tbody id='table-debit'>
											<script id="entry1" type="text/x-handlebars-template">
												{{#each this}}
													<tr>
														<td> {{this.[0]}}</td>
														<td> {{this.[1]}}</td>
														<td> {{this.[2]}}</td>
														<td> {{this.[3]}}</td>
														<td> {{this.[4]}}</td>
														<td> {{this.[5]}}</td>
														<td class="table-action"><a href="#"><i class="align-middle" data-feather="log-in"></i> </a> <a href="#"><i class="align-middle" data-feather="eye"></i></a></td>
													</tr>
												{{/each}}

											</script>
										</tbody>
									</table>
								</div>

							</div>

						</div>

					</div>
				</main>

				<footer class="footer">
					<div class="container-fluid">
						<div class="row text-muted">
							<div class="col-6 text-left">
								<ul class="list-inline">
									<li class="list-inline-item">
										<a class="text-muted" href="#">Support</a>
									</li>
									<li class="list-inline-item">
										<a class="text-muted" href="#">Help Center</a>
									</li>
									<li class="list-inline-item">
										<a class="text-muted" href="#">Privacy</a>
									</li>
									<li class="list-inline-item">
										<a class="text-muted" href="#">Terms of Service</a>
									</li>
								</ul>
							</div>
							<div class="col-6 text-right">
								<p class="mb-0">
									&copy; 2018 - <a href="index.html" class="text-muted">AppStack</a>
								</p>
							</div>
						</div>
					</div>
				</footer>
			</div>

		</div>
	</div>
	<script src="js/app.js"></script>
	<script src="js/forms.js"></script>
	<script src="js/initDataTables.js"></script>
	<script src="js/libs/handlebars/handlebars.min-v4.7.7.js"></script>
	<script src="js/initMenuMessageAlert.js"></script>

	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", function() {

			initSidebarMenu(2, 1, 0)

			var tpl_siderbar = $("#script_menu").html();
			var template_sdb = Handlebars.compile(tpl_siderbar);
			var content = template_sdb(menu_json_data);
			$("#sidebar-menu").html(content)

			//模版渲染
			var tpl_alerts = $("#script_alerts").html();
			var template_alt = Handlebars.compile(tpl_alerts);
			var content = template_alt(alerts);
			$("#alerts").html(content)



			//模版渲染
			var tpl_messages = $("#script_messages").html();
			var template_msg = Handlebars.compile(tpl_messages);
			var content = template_msg(messages);
			$("#messages").html(content)



		});
	</script>


	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", function() {
			//获取模版里面的内容
			var tpl = $("#entry1").html();

			//模版渲染
			var template = Handlebars.compile(tpl);

			//定义数据
			var json_data_arr = [
				['1110123123', 18123, 18123, '正常', '2020-01-01', '2020-06-01', ''],
				['1110123124', 1813, 78, '正常', '2020-01-01', '2020-07-01', ''],
				['1110123125', 1811, 811, '逾期', '2020-01-01', '2020-04-01', ''],
				['1110123126', 17123, 17123, '正常', '2020-01-01', '2020-09-01', ''],
				['1110123146', 17123, 17123, '正常', '2020-01-01', '2020-10-01', ''],
				['1110123166', 17123, 17123, '正常', '2020-08-01', '2020-09-01', ''],
				['1110123189', 17123, 17123, '正常', '2020-01-01', '2020-10-01', ''],
				['1110123134', 17123, 17123, '正常', '2020-08-01', '2020-09-01', ''],
				['1110123111', 17123, 17123, '正常', '2020-08-01', '2020-09-01', '']
			];
			var content = template(json_data_arr);

			console.log(content)

			//模版装载到dom节点上
			$("#table-debit").html(content)
		});
	</script>





	<script>
		Handlebars.registerHelper("debug", function(optionalValue) {


			if (optionalValue) {


				console.log("==========begin==========");

				console.log(optionalValue);

				console.log("========== end ==========");

			}


		});
		Handlebars.registerHelper('ifCond', function(v1, operator, v2, options) {

			switch (operator) {
				case '==':
					return (v1 == v2) ? options.fn(this) : options.inverse(this);
				case '===':
					return (v1 === v2) ? options.fn(this) : options.inverse(this);
				case '!=':
					return (v1 != v2) ? options.fn(this) : options.inverse(this);
				case '!==':
					return (v1 !== v2) ? options.fn(this) : options.inverse(this);
				case '<':
					return (v1 < v2) ? options.fn(this) : options.inverse(this);
				case '<=':
					return (v1 <= v2) ? options.fn(this) : options.inverse(this);
				case '>':
					return (v1 > v2) ? options.fn(this) : options.inverse(this);
				case '>=':
					return (v1 >= v2) ? options.fn(this) : options.inverse(this);
				case '&&':
					return (v1 && v2) ? options.fn(this) : options.inverse(this);
				case '||':
					return (v1 || v2) ? options.fn(this) : options.inverse(this);
				default:
					return options.inverse(this);
			}
		});
	</script>

</body>

</html>
